<template>
  <div class="login-page">
    <div class="login-panel">
      <h2 class="login-title">小宠端管理平台</h2>
      <el-form
        :model="loginFormData"
        label-position="left"
        :rules="rules"
        class="container-form"
        ref="loginForm"
      >
        <el-form-item
          prop="username"
          style="margin-top: 40px"
          class="form-item"
        >
          <span class="label">账号:</span>
          <el-input
            class="el-input"
            type="text"
            v-model.trim="loginFormData.username"
            placeholder="请输入您的帐号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>

        <el-form-item
          prop="password"
          style="margin-top: 40px"
          class="form-item"
        >
          <span class="label">密码:</span>
          <el-input
            class="el-input"
            type="password"
            v-model.trim="loginFormData.password"
            placeholder="请输入您的密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="选择角色:"
          style="margin-top: 40px"
          v-if="tpyeFlag != 'login'"
        >
          <el-radio-group v-model="loginFormData.role">
            <el-radio label="1">超级管理员</el-radio>
            <el-radio label="2">普通管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="submitForm('loginForm')"
        class="login-btn"
        >{{ tpyeFlag === "login" ? "登录" : "注册" }}</el-button
      >
      <button @click="changeType()" class="chnage-type">
        {{ tpyeFlag === "login" ? "注册" : "登录" }}
        <i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5"
export default {
  name: "login",
  props: {
    msg: String
  },
  data() {
    return {
      // 账号登录-账号/密码
      tpyeFlag: "login",
      salt: "afeu$%#SDCV*YG)87ygv87403pgh-t%^(&)U_{$^DSXC*",
      loginFormData: {
        username: "",
        password: "",
        role: "1"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户账号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    //切换登录/注册
    changeType() {
      this.$message({
        message: "该功能暂未对外开放",
        type: "warning"
      })
      return
      // if (this.tpyeFlag === "login") {
      //   this.tpyeFlag = "registered"
      // } else {
      //   this.tpyeFlag = "login"
      // }
    },
    //注册接口
    async registered() {
      let that = this
      let newPassword = md5(this.loginFormData.password + that.salt)
      let params = {
        username: this.loginFormData.username,
        password: newPassword,
        role: this.loginFormData.role
      }
      try {
        await that.$http.get("/manager/newManager", params)
        this.$message({
          message: "新建管理员成功",
          type: "success"
        })
        this.changeType()
      } catch (err) {
        console.log("报错了：", err)
      }
    },
    //登录接口
    async login() {
      console.log("接口请求测试")
      let that = this
      let newPassword = md5(this.loginFormData.password + that.salt)
      let params = {
        username: this.loginFormData.username,
        password: newPassword
      }
      try {
        let res = await that.$http.post("/manager/managerLogin", params)
        sessionStorage.setItem("role", res.data.role)
        this.$router.push("/home")
      } catch (err) {
        console.log("报错了：", err)
      }
    },
    //上传表单
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (that.tpyeFlag === "login") {
            that.login()
          } else {
            that.registered()
          }
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login-page {
  height: 100vh;
  background: url("../../assets/img/login-bg.jpg") no-repeat top;
  background-size: cover;
  position: relative;
  text-align: center;
  .login-panel {
    background: #ffffff;
    min-width: 400px;
    min-height: 300px;
    max-height: 400px;
    width: 30%;
    height: 40%;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translateY(-50%);
    padding: 20px;
    .chnage-type {
      position: absolute;
      top: 20px;
      right: 20px;
      border: none;
      background: transparent;
      color: $themeColor;
      cursor: pointer;
    }
    .login-title {
      font-size: 30px;
    }
    .login-btn {
      margin-top: 5%;
      width: 80%;
      background: $themeColor;
    }
    .registered-btn {
      margin-top: 5%;
      width: 80%;
      background: #c0c1c2;
    }
    .form-item /deep/.el-form-item__content {
      display: flex;
      flex-direction: row;
      .label {
        width: 100px;
      }
      .el-form-item__error {
        left: 100px;
      }
    }
  }
}
</style>
